<template>
  <view class="list-item flex-x-sb" @click="gotoDetail">
    <view class="good-banner">
      <image class="banner" :src="good.pic_url" mode="aspectFit" />
      <goodsSaleNo
        v-if="good.product_type !== 6"
        :imgWidth="'132rpx'"
        :goodsInfo="good"
      ></goodsSaleNo>
    </view>
    <view class="goods-info">
      <view class="goods-name">{{ good.name }}</view>
      <view class="goods-price">
        <view class="price">
          <text>￥</text>
          <text>{{ good.price | priceBeforeZero }}</text>
          <text>{{ good.price | priceAfterZero }}</text>
        </view>
      </view>
      <!-- <view class="good-evaluate">
        <text>{{ good.comment }}{{ $t("search.evaluation") }}</text>
        <text>{{ good.rank_good_percent }}{{ $t("goods.good") }}</text>
      </view> -->
      <view class="good-sale flex-x-sb flex-y-center">
        <view class=""> {{ $t("goods.count") }}：{{ good.sales }} </view>
        <!-- <view class="add-car" @click.stop="addCart" v-if="good.product_type == 0">
          <image :src="asyncImgs.images.add_car_icon" mode="aspectFit" />
        </view> -->
      </view>
    </view>
  </view>
</template>

<script>
import goodsSaleNo from "@/components/goodsSaleNo/index.vue";
export default {
  props: {
    good: {
      type: Object,
      default: {},
    },
  },
  components: {
    goodsSaleNo,
  },
  data() {
    return {};
  },
  created() {},
  filters: {
    priceBeforeZero(val) {
      if (val.indexOf(".") < 0) return `${val}.`;
      return val.substr(0, val.indexOf("."));
    },
    priceAfterZero(val) {
      if (val.indexOf(".") < 0) return "00";
      return val.substr(val.indexOf("."), val.lenhth);
    },
  },
  computed: {},
  methods: {
    gotoDetail() {
      switch (this.good.product_type) {
        case 6:
          this.$utils.toUrl(
            "/marketing/serviceHome/goods/item/index?id=" + this.good.id
          );
          break;

        default:
          this.$utils.toUrl("/goods/goods/goods?id=" + this.good.id);
          break;
      }
    },
    addCart() {
      uni.$emit("searchAddGoods", this.good);
    },
  },
};
</script>

<style scoped lang="scss">
.list-item {
  margin: 0 24rpx 24rpx;
  // display: flex;
  // align-items: flex-start;
  // position: relative;

  .good-banner {
    width: 264rpx;
    height: 264rpx;
    background: #f2f2f2;
    border-radius: 16rpx;
    display: block;
    margin-right: 20rpx;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    .banner {
      width: 100%;
      height: 100%;
      display: block;
      border-radius: 16rpx;
    }
  }

  .goods-info {
    flex: 1;
    flex-shrink: 0;

    .goods-name {
      font-size: 28rpx;
      font-weight: 400;
      color: #262626;
      line-height: 40rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .goods-price {
      line-height: 40rpx;
      margin-top: 37rpx;

      .price {
        display: flex;
        align-items: baseline;
        color: #fa2c19;
        font-weight: 500;

        text:nth-child(1) {
          font-size: 24rpx;
        }

        text:nth-child(2) {
          font-size: 36rpx;
        }

        text:nth-child(3) {
          font-size: 24rpx;
        }
      }
    }

    .good-evaluate {
      margin-top: 10rpx;
      font-size: 22rpx;
      font-weight: 400;
      color: #888888;
      line-height: 40rpx;

      text:last-child {
        margin-left: 13rpx;
      }
    }

    .good-sale {
      margin-top: 8rpx;
      font-size: 22rpx;
      font-weight: 400;
      color: #888888;
      line-height: 40rpx;

      .add-car {
        width: 52rpx;
        height: 52rpx;
        background: #f2f2f2;
        border-radius: 26rpx;
        // position: absolute;
        // right: 0;
        // bottom: 0;
        // z-index: 11;
        display: flex;
        justify-content: center;
        align-items: center;

        image {
          width: 24rpx;
          height: 24rpx;
          display: block;
        }
      }
    }
  }
}
</style>
